<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        transition-duration: 0.4s;
    }

    button:hover {
        background-color: #45a049;
    }
</style>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript">
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } 

</script>
<!--// Meta tag Keywords -->

<!-- css files -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- Style-CSS -->
<link rel="stylesheet" href="css/font-awesome.css">
<!-- Font-Awesome-Icons-CSS -->
<link rel='stylesheet' type='text/css'
	href='css/jquery.easy-gallery.css' />
<!-- For-gallery-CSS -->
<!-- //css files -->

<!-- online-fonts -->
<link
	href="http://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic,hebrew,latin-ext"
	rel="stylesheet">
<link
	href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=latin-ext,vietnamese"
	rel="stylesheet">
<!-- //online-fonts -->

<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->
</head>
<%
if (session.getAttribute("user") != null) {
%>
<body>
	<!-- header -->
	<div class="header">
		<div class="agile-top-header">
			<div class="logo">
				<h1>
					<a href="index.html">Fan<span>tas</span>tic F<span>oo</span>d
					</a>
				</h1>
			</div>
			<!-- navigation -->
			<div class="top-left">
				<div class="top-icons">
					<!--  
				<ul>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>脸书 </a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>微博 </a></li>
					<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i>谷歌 </a></li>
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i>朋友圈</a></li>
				</ul>
			-->
				</div>
				<div class="top-nav">
					<nav class="navbar navbar-default">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle"
								data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1">
								<span class="sr-only">切换导航</span> <span class="icon-bar"></span>
								<span class="icon-bar"></span> <span class="icon-bar"></span>
							</button>

						</div>
						<!-- navbar-header -->
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<nav class="linkEffects linkHoverEffect_2">
								<ul>
									<li><a href="index.jsp" data-link-alt="Home"
										class="active"><span>家</span></a></li>
									<li><a href="#services" data-link-alt="SERVICES"
										class="scroll"><span>服务</span></a></li>
									<li><a href="#gallery" data-link-alt="GALLERY"
										class="scroll"><span>画廊</span></a></li>
									<li><a href="#special" data-link-alt="SPECIAL"
										class="scroll"><span>特色菜</span></a></li>
									<li><a href="#clients" data-link-alt="CLIENTS"
										class="scroll"><span>顾客</span></a></li>
									<li><a href="#contact" data-link-alt="CONTACT US"
										class="scroll"><span>联系我们</span></a></li>
									<li><a data-link-alt="LOG OUT" 
									  onclick="if (confirm('确定要退出吗？')) return true; else return false;" 
									href="loginout.jsp" target=_top ><span><button>退出登录</button></span></a></li>
								</ul>
							</nav>
						</div>
						<div class="clearfix"></div>
					</nav>
				</div>
				<div class="clearfix"></div>
				<!-- //navigation -->
			</div>
		</div>
		<div class="slider">
			<!-- Slideshow 3 -->
			<ul class="rslides" id="slider">
				<li><img src="images/bg1.jpg" alt="">
					<div class="slider-info">
						<h4>五味俱全</h4>
						<p>舌尖上的美味，让人欲罢不能</p>
						<div class="button">
							<a href="#" data-toggle="modal" data-target="#myModal">了解更多<span
								class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
						</div>
					</div></li>
				<li><img src="images/bg2.jpg" alt="">
					<div class="slider-info">
						<h4>垂涎欲滴</h4>
						<p>此物只应天上有，人间哪得几回闻</p>
						<div class="button">
							<a href="#" data-toggle="modal" data-target="#myModal">了解更多<span
								class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
						</div>
					</div></li>
				<li><img src="images/bg3.jpg" alt="">
					<div class="slider-info">
						<h4>津津有味</h4>
						<p>吃食是一种幸福，品味是一种情趣</p>
						<div class="button">
							<a href="#" data-toggle="modal" data-target="#myModal">了解更多<span
								class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
						</div>
					</div></li>
			</ul>
			<!-- Slideshow 3 Pager -->
			<ul id="slider3-pager">
				<li><a href="#"><img src="images/bgs-11.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/bgs-22.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/bgs-33.jpg" alt=""></a></li>
			</ul>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>山珍海味</h4>
					<img src="images/m1.jpg" alt="Food" /> <span>做美食就像做人，必须真材实食料，还要去杂选优。精心烹饪才会成为美味佳肴。</span>
				</div>
			</div>

		</div>
	</div>
	<!-- //Modal -->
	<!-- //header -->

	<!-- main-content -->
	<!-- Services -->
	<div class="welcome agileits" id="services">
		<div class="container">
			<div class="welcome-main">
				<div class="welcome-top">
					<h2>最好的服务</h2>
					<p>面面俱到</p>
				</div>
				<div class="welcome-bottom">
					<div class="col-md-4 welcome-grid">
						<img src="images/g1.png" alt="" class="img-responsive">
						<h4>服务一</h4>
						<p>用心服务，快乐工作</p>
					</div>
					<div class="col-md-4 welcome-grid">
						<img src="images/g2.png" alt="" class="img-responsive">
						<h4>服务二</h4>
						<p>用心服务，传递笑脸</p>
					</div>
					<div class="col-md-4 welcome-grid">
						<img src="images/g3.png" alt="" class="img-responsive">
						<h4>服务三</h4>
						<p>服务人民，奉献社会</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- Services -->

	<!-- Gallery -->
	<div id="gallery" class="portfolio">
		<div class="container">
			<div class="agileits-title">
				<h3>丰盛的佳肴</h3>
				<p>芳香四溢</p>
			</div>
			<div class="sap_tabs">
				<div id="horizontalTab">
					<ul class="resp-tabs-list">
						<li class="resp-tab-item"><span>全部</span></li>
						<li class="resp-tab-item"><span>甜点</span></li>
						<li class="resp-tab-item"><span>快餐</span></li>
						<li class="resp-tab-item"><span>非素食</span></li>
					</ul>
					<div class="clearfix"></div>
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content">
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga1.jpg' data-big-src='images/ga1.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item1')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga2.jpg' data-big-src='images/ga2.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>闻一闻，顿时口水直流三千尺</p>
									<button onclick="addToCart('item2')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga10.jpg' data-big-src='images/ga10.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>瞧一瞧，勾起我内心的欲望</p>
									<button onclick="addToCart('item3')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga4.jpg' data-big-src='images/ga4.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>品一品，真让人欲罢不能</p>
									<button onclick="addToCart('item4')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga5.jpg' data-big-src='images/ga5.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>尝一尝，我还想吃下一口</p>
									<button onclick="addToCart('item5')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga12.jpg' data-big-src='images/ga12.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>比一比，发现各具风味</p>
									<button onclick="addToCart('item6')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga7.jpg' data-big-src='images/ga7.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>闻一闻，顿时口水直流三千尺</p>
									<button onclick="addToCart('item7')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga8.jpg' data-big-src='images/ga8.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item8')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga11.jpg' data-big-src='images/ga11.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item9')">添加到购物车</button>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga1.jpg' data-big-src='images/ga1.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item1')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga10.jpg' data-big-src='images/ga10.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item3')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga11.jpg' data-big-src='images/ga11.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item9')">添加到购物车</button>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="col-md-3 portfolio-grids">
								<div>
									<img src='images/ga5.jpg' data-big-src='images/ga5.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item5')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-3 portfolio-grids">
								<div>
									<img src='images/ga7.jpg' data-big-src='images/ga7.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item7')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-3 portfolio-grids">
								<div>
									<img src='images/ga8.jpg' data-big-src='images/ga8.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item8')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-3 portfolio-grids">
								<div>
									<img src='images/ga12.jpg' data-big-src='images/ga12.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item6')">添加到购物车</button>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga2.jpg' data-big-src='images/ga2.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item2')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga4.jpg' data-big-src='images/ga4.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item4')">添加到购物车</button>
								</div>
							</div>
							<div class="col-md-4 portfolio-grids">
								<div>
									<img src='images/ga13.jpg' data-big-src='images/ga13.jpg'
										class="img-responsive" alt=" " />
									<p style='opacity: 0; display: none'>看一看，瞬时激起无穷的好奇心</p>
									<button onclick="addToCart('item10')">添加到购物车</button>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //Gallery -->

	<!-- Special -->
	<div class="projects" id="special">
		<div class="container">
			<div class="port-head">
				<h3 class="w3l_head w3l_head1">特色菜肴</h3>
				<p>垂涎三尺</p>
			</div>
		</div>
		<div class="projects-grids">
			<div class="sreen-gallery-cursual">
				<ul id="flexiselDemo1">
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s1.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>美味佳肴</h4>
									<p>敞开胸怀，尽情享受</p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s2.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>美好时光</h4>
									<p>芳香四溢，香飘十里</p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s3.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>及时享乐</h4>
									<p>油而不腻，香脆可口</p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s44.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>抛下烦恼</h4>
									<p>口齿留香，回味无穷</p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s5.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>尽情享受</h4>
									<p>质嫩爽口，山珍海味</p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item">
							<div class="projects-agile-grid-info">
								<img src="images/s6.jpg" alt="" />
								<div class="projects-grid-caption">

									<h4>忘却烦恼</h4>
									<p>香味四溢，风味独特</p>
								</div>
							</div>
						</div>
					</li>
				</ul>

			</div>
		</div>
	</div>
	<!-- //Special -->

	<!-- testimonial -->
	<div class="test" id="clients">
		<div class="container">
			<div class="about-w3l">
				<h3>客户反馈</h3>
				<p>宾至如归</p>
			</div>
			<div class=" test-gr">
				<div class=" test-gri1">
					<div id="owl-demo2" class="owl-carousel">
						<div class="agile">
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te4.jpg" alt="" class="img-r">
									<p>这家餐厅环境很好，非常干净整洁，食物不仅外形美观，重要的是味道非常棒，色味俱佳。
										做法保留了食材原有的味道，清新爽口。而且菜品选择非常多，价格也不高，适合带着家人一起去。</p>
									<h4>Andery</h4>
									<span></span>
								</div>
							</div>
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te2.jpg" alt="" class="img-r">
									<p>这道菜味道鲜美，色泽诱人，口感细腻，肉质鲜嫩，香气四溢，真是一道不可多得的好菜。</p>
									<h4>Bryan</h4>
									<span></span>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="agile">
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te3.jpg" alt="" class="img-r">
									<p>我不喜欢吃辣的，但是这道麻辣小龙虾让我大呼过瘾，辣度适中，入口鲜嫩有味，配上小酒更是美味无比。</p>
									<h4>Michael</h4>
									<span></span>
								</div>
							</div>
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te1.jpg" alt="" class="img-r">
									<p>汤汁浓、味道重、油水足的菜，就是好菜，用浓而不腻、味浓香醇、盐足油重等词语，来形容美味佳肴。
										厨师调味，也离不了浓、重、大的三字原则。</p>
									<h4>Johnson</h4>
									<span></span>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="agile">
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te3.jpg" alt="" class="img-r">
									<p>味道超赞，而且一看就让人觉得很有食欲，但是分量不大，属于比较精致的类型。胜在菜品也很新鲜，味道咸淡适中，
										而且火候掌握的刚好。上菜速度很快。就是用餐环境还需要改善，但是价格非常实惠，基本隔段时间就会来一次。</p>
									<h4>Smith</h4>
									<span></span>
								</div>
							</div>
							<div class="col-md-6 test-grid">
								<div class="test-grid1">
									<img src="images/te2.jpg" alt="" class="img-r">
									<p>这道菜一上桌就让人非常有食欲，香气浓郁，非常诱人。口感非常的脆嫩，爽滑。浓郁的酱汁包裹着食材，
										咬下去酱汁充满口腔。而且用料十分新鲜，给的量也很足，性价比超级高。下次有机会一定会再来。</p>
									<h4>Jessica</h4>
									<span></span>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //testimonial -->

	<!-- Counter -->
	<section class="stats" id="stats">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-3 stats-grid stats-grid-1 gridw3">
					<i class="fa fa-smile-o" aria-hidden="true"></i>
					<div class="numscroller" data-slno='1' data-min='0' data-max='158'
						data-delay='3' data-increment="1">85</div>
					<h4>满意客户</h4>
				</div>
				<div class="col-md-3 col-sm-3 stats-grid stats-grid-2 gridw3">
					<i class="fa fa-trophy" aria-hidden="true"></i>
					<div class="numscroller" data-slno='1' data-min='0' data-max='63'
						data-delay='3' data-increment="1">95</div>
					<h4>所获奖章</h4>
				</div>
				<div class="col-md-3 col-sm-3 stats-grid stats-grid-3 gridw3">
					<i class="fa fa-cutlery" aria-hidden="true"></i>
					<div class="numscroller" data-slno='1' data-min='0' data-max='421'
						data-delay='3' data-increment="1">80</div>
					<h4>最好的祝福</h4>
				</div>
				<div class="col-md-3 col-sm-3 stats-grid stats-grid-4 gridw3">
					<i class="fa fa-users" aria-hidden="true"></i>
					<div class="numscroller" data-slno='1' data-min='0' data-max='562'
						data-delay='3' data-increment="1">90</div>
					<h4>顶级厨师</h4>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</section>
	<!-- //Counter -->

	<!-- Contact -->
	<!-- Contact-form -->
	<div class="contact-form" id="contact">
		<div id="cart">
			<h3>购物车</h3>
			<ul id="cart-items">
				<!-- 这里将显示已添加的商品 -->
			</ul>
			<button onclick="clearCart()">清空购物车</button>
			<button onclick="checkout()">结 账</button>
		</div>

	</div>
	<!--footer-->
	<div class="w3l-footer">
		<div class="container">
			<div class="left-w3">
				<a href="#">Fantastic Food</a>
			</div>
			<div class="right-social">
				<i class="fa fa-facebook-square" aria-hidden="true"></i> <i
					class="fa fa-twitter-square" aria-hidden="true"></i> <i
					class="fa fa-google-plus-square" aria-hidden="true"></i>
			</div>
			<div class="clearfix"></div>
			<div class="footer-nav">
				<ul>
					<li><a class="menu__link scroll" href="#home">家</a></li>
					<li><a class="menu__link scroll" href="#about">服务</a></li>
					<li><a class="menu__link scroll" href="#gallery">画廊</a></li>
					<li><a class="menu__link scroll" href="#special">特色菜</a></li>
					<li><a class="menu__link scroll" href="#clients">顾客</a></li>
					<li><a class="menu__link scroll" href="#contact">联系我们</a></li>
				</ul>
			</div>
			<div class="copyright-agile">
				<p>
					&copy;版权所有<a target="_blank" href=""></a>
				</p>
			</div>
		</div>
	</div>
	<!--//footer-->



	<!-- js files -->
	<!-- For-Banner -->
<script>
    var cartItems = [];
    function addToCart(item) {
        var itemData = {
            id: item,
            name: "商品" + item,
            price: 10, // 商品价格
            quantity: 1 // 商品数量
        };
        var existingItem = cartItems.find(function (i) {
            return i.id === itemData.id;
        });
        if (existingItem) {
            existingItem.quantity++;
        } else {
            cartItems.push(itemData);
        }
        updateCart();
    }
    function updateCart() {
        var cartList = document.getElementById("cart-items");
        cartList.innerHTML = "";
        cartItems.forEach(function(item) {
            var li = document.createElement("li");
            li.textContent = item.name + " - ￥" + item.price + " x " + item.quantity;
            var deleteBtn = document.createElement("button");
            deleteBtn.textContent = "删除";
            deleteBtn.onclick = function() {
                deleteItem(item.id);
            };
            li.appendChild(deleteBtn);
            cartList.appendChild(li);
        });
    }
    function clearCart() {
        cartItems = [];
        updateCart();
    }
    function deleteItem(id) {
        cartItems = cartItems.filter(function(item) {
            return item.id !== id;
        });
        updateCart();
    }
    
    function checkout() {  
        var total = 0;  
        cartItems.forEach(function(item) {  
            total += item.price * item.quantity;  
        });  
  
        // 显示总金额  
        alert("总金额: ￥" + total);  
  
        // 假设付款成功，显示消息  
        alert("付款成功！");  
  
        // 清除购物车（可选）  
        clearCart();  
    }  
</script>
	<script src="js/responsiveslides.min.js"></script>
	<script>
		// You can also use "$(window).load(function() {"
		$(function() {
			$("#slider").responsiveSlides({
				auto : true,
				manualControls : '#slider3-pager',
			});
		});
	</script>
	<!-- //For-Banner -->

	<!-- For-Gallery-js -->
	<!-- script for portfolio -->
	<script type='text/javascript' src='js/jquery.easy-gallery.js'></script>
	<script type='text/javascript'>
		//init Gallery
		$('.portfolio').easyGallery();
	</script>
	<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#horizontalTab').easyResponsiveTabs({
				type : 'default', //Types: default, vertical, accordion           
				width : 'auto', //auto or any width like 600px
				fit : true
			// 100% fit in a container
			});
		});
	</script>
	<!-- //script for portfolio -->
	<!-- //For-Gallery-js -->

	<!-- js for Counter -->
	<script type="text/javascript" src="js/numscroller-1.0.js"></script>
	<!-- /js for Counter -->

	<!-- for-Clients -->
	<script src="js/owl.carousel.js"></script>
	<link href="css/owl.carousel.css" rel="stylesheet">
	<!-- requried-jsfiles-for owl -->
	<script>
		$(document).ready(function() {
			$("#owl-demo2").owlCarousel({
				items : 1,
				lazyLoad : false,
				autoPlay : true,
				navigation : false,
				navigationText : false,
				pagination : true,
			});
		});
	</script>
	<!-- //requried-jsfiles-for owl -->
	<!-- //for-Clients -->

	<!-- Map-JavaScript -->
	<!------<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>        
			<script type="text/javascript">
				google.maps.event.addDomListener(window, 'load', init);
				function init() {
					var mapOptions = {
						zoom: 11,
						center: new google.maps.LatLng(40.6700, -73.9400),
						styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
					};
					var mapElement = document.getElementById('map');
					var map = new google.maps.Map(mapElement, mapOptions);
					var marker = new google.maps.Marker({
						position: new google.maps.LatLng(40.6700, -73.9400),
						map: map,
					});
				}
			</script>---->
	<!-- //Map-JavaScript -->

	<!-- For-Special-Food -->
	<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems : 4,
				animationSpeed : 1000,
				autoPlay : true,
				autoPlaySpeed : 3000,
				pauseOnHover : true,
				enableResponsiveBreakpoints : true,
				responsiveBreakpoints : {
					portrait : {
						changePoint : 480,
						visibleItems : 1
					},
					landscape : {
						changePoint : 640,
						visibleItems : 2
					},
					tablet : {
						changePoint : 768,
						visibleItems : 3
					}
				}
			});

		});
	</script>
	<script type="text/javascript" src="js/jquery.flexisel.js"></script>
	<!-- //For-Special-Food -->

	<!-- start-smoth-scrolling -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- start-smoth-scrolling -->

	<!-- for-bottom-to-top smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			 */
			$().UItoTop({
				easingType : 'easeOutQuart'
			});
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span
		id="toTopHover" style="opacity: 1;"> </span></a>
	<!-- //for-bottom-to-top smooth scrolling -->
	<!-- //js files -->
</body>
<%
} else {
request.getRequestDispatcher("login.jsp").forward(request, response);
}
%>
</html>